<template>
  <el-row>
    <!--    <el-col :span="4">-->
    <!--      <div class="box">-->
    <!--        <el-scrollbar>-->
    <!--          <basic-container>-->
    <!--            <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/>-->
    <!--          </basic-container>-->
    <!--        </el-scrollbar>-->
    <!--      </div>-->
    <!--    </el-col>-->
    <el-col :span="24">
      <el-tabs type="border-card" @tab-click="tabHandleClick">

        <el-tab-pane label="图表">
          <basic-container>
            <!--            <el-button type="success"-->
            <!--                       icon="el-icon-plus"-->
            <!--                       size="small"-->
            <!--                       @click="$refs.crud.rowAdd()">新增-->
            <!--            </el-button>-->
            <!-- <el-button type="warning"
                       icon="el-icon-delete"
                       size="small"
                       >清空课表</el-button> -->
            <basic-container>
              <avue-form :option="option"
                         v-model="form"
                         @submit="initkb"
              >
              </avue-form>
            </basic-container>


            <div id="coursesTable" @contextmenu.prevent="onContextmenu"></div>
          </basic-container>
        </el-tab-pane>
        <!--        <el-tab-pane label="列表">-->
        <!--          <basic-container>-->
        <!--            <avue-crud :option="option"-->
        <!--                       :table-loading="loading"-->
        <!--                       :data="data"-->
        <!--                       :page="page"-->
        <!--                       :permission="permissionList"-->
        <!--                       :before-open="beforeOpen"-->
        <!--                       v-model="form"-->
        <!--                       ref="crud"-->
        <!--                       @row-update="rowUpdate"-->
        <!--                       @row-save="rowSave"-->
        <!--                       @row-del="rowDel"-->
        <!--                       @search-change="searchChange"-->
        <!--                       @search-reset="searchReset"-->
        <!--                       @selection-change="selectionChange"-->
        <!--                       @current-change="currentChange"-->
        <!--                       @size-change="sizeChange"-->
        <!--                       @on-load="onLoad"-->
        <!--            >-->
        <!--              <template slot="menuLeft">-->
        <!--                <el-button type="danger"-->
        <!--                           size="small"-->
        <!--                           icon="el-icon-delete"-->
        <!--                           plain-->
        <!--                           v-if="permission.bjkcsort_delete"-->
        <!--                           @click="handleDelete">删 除-->
        <!--                </el-button>-->
        <!--              </template>-->
        <!--            </avue-crud>-->


        <!--          </basic-container>-->
        <!--        </el-tab-pane>-->
      </el-tabs>


    </el-col>
  </el-row>

</template>

<script>
import {
  getList,
  add,
  update,
  remove,
  getKebiao,
  schoolClass, gradeDic, grade, getCourseSelect
} from "@/api/service/jskcsort";
import {mapGetters} from "vuex";

import Timetables from 'timetables';

var timetables = [
  ['', '', '', '', '', '', '', '', '', '', '', ''],
  ['', '', '', '', '', '', '', '', '', '', '', ''],
  ['', '', '', '', '', '', '', '', '', '', '', ''],
  ['', '', '', '', '', '', '', '', '', '', '', ''],
  ['', '', '', '', '', '', '', '', '', '', '', ''],
  ['', '', '', '', '', '', '', '', '', '', '', ''],
  ['', '', '', '', '', '', '', '', '', '', '', ''],
];


const highlightWeek = new Date().getDay();


export default {
  data() {
    return {
      tt: false,
      treeBj: '0',
      treeData: [],
      treeOption: {
        nodeKey: 'id',
        lazy: false,
        addBtn: false,
        menu: false,
        size: 'small',
        defaultExpandAll: true,
        props: {
          labelText: '标题',
          label: 'title',
          value: 'id',
          children: 'children'
        }
      },
      type: {},
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      currentClickNode: [],
      kbIndex: [[]],
      selectionList: [],
      option: {
        // height: 'auto',
        // calcHeight: 210,
        // searchShow: true,
        // searchMenuSpan: 6,
        // tip: false,
        // border: true,
        // index: true,
        // viewBtn: true,
        // selection: true,
        menuSpan: 5,
        submitText: '搜索',
        emptyText: '清空',
        column: [
          // {
          //   label: "主键",
          //   prop: "id",
          //   rules: [{
          //     required: true,
          //     message: "请输入主键",
          //     trigger: "blur"
          //   }],
          //   hide: true,
          //   display: false
          // },
          {
            label: "学校名称",
            prop: "schoolId",
            search: true,
            hide: true,
            span: 7,
            rules: [{
              required: true,
              message: "请选择学校",
              trigger: "blur"
            }],
            type: "tree",
            cascader: ['xqId', 'jsId'],
            dicUrl: "/api/PcPublicService/GetSchoolTreeSelect",
            props: {
              label: "xxName",
              value: "id"
            },
            // value: '3',
            // defaultValue:'3'
          },

          // {
          //   label: "学期",
          //   prop: "xqName",
          //   addDisplay: false,
          //   editDisplay: false,
          //   viewDisplay: false,
          //   rules: [{
          //     required: true,
          //     message: "请输入学期",
          //     trigger: "blur"
          //   }],
          //
          // },
          {
            label: "学期",
            prop: "xqId",
            search: true,
            span: 7,
            rules: [{
              required: true,
              message: "请选择学期",
              trigger: "blur"
            }],
            hide: true,
            type: "select",
            dicUrl: "/api/ManageClassCoursePlan/GetSchoolSemesterSelect?schoolId={{key}}",
            props: {
              label: "xqName",
              value: "id"
            },
          },
          {
            label: "教师",
            prop: "jsId",
            span: 7,
            search: true,
            rules: [{
              required: true,
              message: "请选择教师",
              trigger: "blur"
            }],
            hide: true,
            type: "select",
            dicUrl: "/api/PcPublicService/GetTeacherSelect?schoolId={{key}}",
            props: {
              label: "jsName",
              value: "id"
            },
          },
        ]
      },
      data: [],
      schoolId: '',
      labelName: '图表'
    };
  },
  computed: {
    ...mapGetters(["permission", "JSuserInfo"]),
    permissionList() {
      return {
        addBtn: false,//this.vaildData(this.permission.bjkcsort_add, false),
        viewBtn: false,//this.vaildData(this.permission.bjkcsort_view, false),
        delBtn: false,//this.vaildData(this.permission.bjkcsort_delete, false),
        editBtn: false,//this.vaildData(this.permission.bjkcsort_edit, false)
      };
    },
    js_Id() {
      return this.JSuserInfo.js_Id
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  mounted() {
    // getBjTree({}).then(res => {
    //   this.treeData = res.data.data;
    // });
    this.initkb();
  },
  methods: {
    schoolTypeChange(v) {
      console.log(v)
      this.schoolId = v
      // 年级
      const school = this.findObject(this.option.column, "njId");
      school.dicData = [];
    },
    // 切换所属阶段
    jdIdTypeChange(v) {
      console.log('切换所属阶段', v)
      if (this.schoolId !== "" && this.schoolId !== null && this.schoolId !== undefined && v !== "" && v !== null && v !== undefined) {
        let params = {
          schoolId: this.schoolId,
          jdId: v
        }
        grade(params).then(res => {
          const gradeData = this.findObject(this.option.column, "njId");
          gradeData.dicData = res.data.data;
        });
      }
    },
    njIdTypeChange(v) {
      if (v !== null && v !== '' && v !== undefined) {
        // let params = {
        //   njId: v,
        // }
        gradeDic({njId: v}).then(res => {
          schoolClass({njId: res.data.data.id}).then(res => {
            const calssData = this.findObject(this.option.column, "bjId");
            calssData.dicData = res.data.data;
          })
        });
      }
    },
    onContextmenu(event) {
      if (this.currentClickNode.name != "") {
        // this.$contextmenu({
        //   items: [
        //     {
        //       label: "删除课程",
        //       icon: "el-icon-remove",
        //       onClick: () => {
        //         var kcJie = this.currentClickNode.index-1;
        //         var w = this.currentClickNode.week;
        //        var kcZhou = 0;
        //         if(w=="周一"){
        //           kcZhou = 0;
        //         }
        //         if(w=="周二"){
        //           kcZhou = 1;
        //         }
        //         if(w=="周三"){
        //           kcZhou = 2;
        //         }
        //         if(w=="周四"){
        //           kcZhou = 3;
        //         }
        //         if(w=="周五"){
        //           kcZhou = 4;
        //         }
        //         if(w=="周六"){
        //           kcZhou = 5;
        //         }
        //         if(w=="周日"){
        //           kcZhou = 6;
        //         }
        //         var id = this.kbIndex[kcZhou][kcJie];
        //         console.log(kcZhou+","+kcJie+","+id);
        //         this.rowDel({"id":id});
        //       }
        //     }
        //   ],
        //   event, // 鼠标事件信息
        //   customClass: "custom-class", // 自定义菜单 class
        //   zIndex: 3, // 菜单样式 z-index
        //   minWidth: 50 // 主菜单最小宽度
        // });
      } else {
        this.$contextmenu({
          items: [
            {
              label: "添加课程",
              icon: "el-icon-circle-plus",
              onClick: () => {
                this.form.kcJie = this.currentClickNode.index;
                var w = this.currentClickNode.week;
                if (w == "周一") {
                  this.form.kcZhou = 1;
                }
                if (w == "周二") {
                  this.form.kcZhou = 2;
                }
                if (w == "周三") {
                  this.form.kcZhou = 3;
                }
                if (w == "周四") {
                  this.form.kcZhou = 4;
                }
                if (w == "周五") {
                  this.form.kcZhou = 5;
                }
                if (w == "周六") {
                  this.form.kcZhou = 6;
                }
                if (w == "周日") {
                  this.form.kcZhou = 7;
                }
                this.$refs.crud.rowAdd();
              }
            }
          ],
          event, // 鼠标事件信息
          customClass: "custom-class", // 自定义菜单 class
          zIndex: 3, // 菜单样式 z-index
          minWidth: 50 // 主菜单最小宽度
        });
      }
      return false;
    },
    tabHandleClick(tab, event) {
      console.log(event, tab)
      // this.labelName = tab.label
      // if (tab.label == '图表') {
      //   this.initkb();
      // } else {
      //   this.onLoad(this.page);
      // }
    },
    nodeClick(data) {
      if (data.hasChildren) {
        this.treeBj = data.id;
        if (this.labelName === '图表') {
          this.initkb();
        } else {
          this.onLoad(this.page);
        }
      } else {
        this.data = []
      }

      // this.form.bjId =
    },
    initkb(form, done) {
      console.log(this.form)
      let params = {
        schoolId: this.form.schoolId,
        xqId: this.form.xqId,
        jsId: this.form.jsId,
      }
      getKebiao(params).then(res => {
        timetables = [
          ['', '', '', '', '', '', '', '', '', '', '', ''],
          ['', '', '', '', '', '', '', '', '', '', '', ''],
          ['', '', '', '', '', '', '', '', '', '', '', ''],
          ['', '', '', '', '', '', '', '', '', '', '', ''],
          ['', '', '', '', '', '', '', '', '', '', '', ''],
          ['', '', '', '', '', '', '', '', '', '', '', ''],
          ['', '', '', '', '', '', '', '', '', '', '', ''],
        ];
        this.initKebiaoData(res.data.data, form, done);
      });
    },
    initKebiaoData(list, form, done) {
      this.kbIndex = [
        ['', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', '', '', '', '', ''],
      ];
      for (var i in list) {
        var kc = list[i];
        var z = Number(kc.kcZhou) - 1;
        var j = Number(kc.kcJie) - 1;
        var n = kc.kcJieNum;
        timetables[z][j] = kc.kcName;
        this.kbIndex[z][j] = kc.id;

        if (n > 1) {
          for (var ii = 1; ii < n; ii++) {
            j = j + 1;
            timetables[z][j] = kc.kcName;
            this.kbIndex[z][j] = kc.id;

          }
        }
      }
      var that = this;
      if (this.tt) {
        this.tt.setOption({
          timetables: timetables,
          highlightWeek: highlightWeek,
          merge: false,

          week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          timetableType: [
            ['上午', 4],
            ['下午', 4],
            ['晚上', 4]

          ],
          gridOnClick: function (e) {
            that.currentClickNode = e;
          },
        })
      } else {
        console.log('highlightWeek', highlightWeek)
        this.tt = new Timetables({
          el: '#coursesTable',
          timetables: timetables,
          highlightWeek: highlightWeek,
          merge: false,
          week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          timetableType: [
            ['上午', 4],
            ['下午', 4],
            ['晚上', 4]
          ],
          gridOnClick: function (e) {
            that.currentClickNode = e;
          },
        });
      }
      try {
        done()
      } catch (e) {
        console.log(e)
      }
    },

    rowSave(row, done, loading) {
      row.id = row.id === '' ? '0' : row.id
      console.log(row)
      getCourseSelect({id: row.bjKcId}).then((res) => {
        row.kcId = res.data.data.kcId
        add(row).then(() => {
          done();
          if (this.labelName === '图表') {
            this.initkb();
          } else {
            this.onLoad(this.page);
          }
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        }, error => {
          window.console.log(error);
          loading();
        });
      }, error => {
        window.console.log(error);
        loading();
      })
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        done();
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove({ids: row.id});
        })
        .then(() => {
          if (this.labelName === '图表') {
            this.initkb();
          } else {
            this.onLoad(this.page);
          }
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove({ids: this.ids});
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit"].includes(type)) {
        // getDetail({id: this.form.id}).then(res => {
        //   this.form = res.data.data;
        // });
      }
      done();
    },
    searchReset() {
      console.log('111111')
      this.onLoad();
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    onLoad(page, params = {}) {
      // this.loading = true;
      // params.bjId = this.treeBj;

      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        // this.page.total = data.total;
        this.data = data;
        this.loading = false;
        this.selectionClear();
      });
      // this.initkb();
      // GradesByTeacher({AppUserId: this.js_Id}).then(res => {
      //   this.treeData = res.data.data;
      //   if (this.treeBj == "0") {
      //     this.treeBj = res.data.data[0].id
      //     this.onLoad(this.page);
      //     // this.initkb();
      //   }
      // });
    }
  }
};
</script>

<style>
#coursesTable {
  /*padding: 15px 10px;*/
  margin-top: 15px;
}

.Courses-head > div {
  text-align: center;
  font-size: 14px;
  line-height: 28px;
}

.left-hand-TextDom, .Courses-head {
  background-color: #f2f6f7;
}

.Courses-leftHand {
  background-color: #f2f6f7;
  font-size: 12px;
}

.Courses-leftHand .left-hand-index {
  color: #9c9c9c;
  margin-bottom: 4px !important;
}

.Courses-leftHand p {
  text-align: center;
  font-weight: 900;
}

.Courses-leftHand > div {
  padding-top: 5px;
  border-bottom: 1px dashed rgb(219, 219, 219);
}

.Courses-leftHand > div:last-child {
  border-bottom: none !important;
}

.left-hand-TextDom, .Courses-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.Courses-content > ul {
  border-bottom: 1px dashed rgb(219, 219, 219);
  box-sizing: border-box;
}

.Courses-content > ul:last-child {
  border-bottom: none !important;
}

.highlight-week {
  color: #02a9f5 !important;
}

.Courses-content li {
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 50px;
}

.stage_1, .left-hand-1 {
  /*background-color: #FF6666;*/
}

.stage_2, .left-hand-2 {
  /*background-color: #3399CC;*/
}

.stage_3, .left-hand-3 {
  /*background-color: #66CCCC;*/
}

.Courses-leftHand {
  border-right: 1px solid #e0e0e0;
  color: #303133;
}

.Courses-leftHand > div {
  writing-mode: vertical-lr;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  letter-spacing: 10px;
}
</style>
